import { Outlet, useNavigate, Link } from "react-router-dom";

export default function News() {
  let Nav = useNavigate();
  let jumpHandle = (par) => {
    /*1. 命令式的写法 */
    if (par) {
      Nav(`/article/${par}/2?name=zs&age=18`);
    }else{
      Nav(`/article`);
    }
  };
  return (
    <>
      <h1>一级路由</h1>
      <h1>这是article路由</h1>

      <p>下面显示路由二级路由</p>
      {/*2. 声明式写法 */}
      <Link to="/article">声明式跳转a页面</Link>
      <button onClick={() => jumpHandle('')}>命令式跳转a页面</button>
      <div>
        <Link to="/article/b/1?name=zs&age=18">声明式跳转b页面</Link>
        <button onClick={() => jumpHandle("b")}>命令式跳转b页面</button>
      </div>
      <Outlet></Outlet>
    </>
  );
}
